<template>
  <van-skeleton title avatar :row="3" :loading="loading" v-for="friend in friendList">
    <van-card
        :title="`${friend.username}`"
        :desc="friend.profile"
        currency=""
        style="border-radius: 15px;background-color: #e8e8e8"
        @click="toChat(friend)"
    >
      <template #thumb>
        <van-image :src="friend?.avatarUrl" round width="88" height="88" />
      </template>
      <template #tags>
        <van-tag color="#7232dd" plain v-for="tag in friend.tags" style="margin-right: 8px; margin-top: 8px"  >
          {{ tag }}
        </van-tag>
      </template>
      <template #price>
        <van-icon name="phone-o" style="">{{ ':' + friend?.phone }}</van-icon>
      </template>
    </van-card>
  </van-skeleton>

</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import {UserType} from "../models/user";

const router = useRouter();


interface friendCardListProps{
  loading: boolean
  friendList: UserType[];
}
withDefaults(defineProps<friendCardListProps>(), {
  loading: true,
})

const toChat = (user) => {
  router.push({
    path: '/chat',
    query: {
      toUserId: user.id,
      receiveType: 0,
      status: 0
    }
  })
};
</script>

<style scoped>

</style>